<template>
  <div class="paneBody">
    <!-- 余额变动 -->
    <el-form v-show="showSearch" ref="queryRef" :model="queryParams" :inline="true">
      <el-form-item label="会员等级" prop="memberCardId">
        <el-select v-model="queryParams.MemberCardTypeId" clearable style="width: 240px">
          <el-option v-for="(m,index) in memberLevelList" :key="index" :label="m.name" :value="m.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号" prop="dataId">
        <el-input
          v-model="queryParams.dataId"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="会员姓名" prop="memberName">
        <el-input
          v-model="queryParams.memberName"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="memberTelno">
        <el-input
          v-model="queryParams.memberTelno"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>  	
    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="20">-->
      <!--        <el-button type="warning" plain>导出</el-button>-->
      <!--      </el-col>-->
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row> 
			
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="index" />
      <el-table-column label="关联订单" prop="dataId" min-width="150" />
      <el-table-column label="会员姓名" prop="resMemberVo.memberName" min-width="120" />
      <el-table-column label="会员卡号" prop="resMemberVo.cardCode" min-width="120" />
      <el-table-column label="手机号" prop="resMemberVo.memberTelno" min-width="120" />
      <el-table-column label="卡片等级" prop="resMemberVo.cardTypeStr" min-width="120" />
      <el-table-column label="交易类型" prop="consumeTypeStr" min-width="120" />
      <el-table-column label="进账" prop="memberValue" min-width="120">
        <template #default="scope">
          <span v-if="scope.row.type==0">{{ scope.row.dataValue }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="支出" prop="memberValue" min-width="120">
        <template #default="scope">
          <span v-if="scope.row.type==1">{{ scope.row.dataValue }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>  
      <el-table-column label="剩余金额" prop="afterBalance" min-width="150" />
      <el-table-column label="交易日期" prop="orderTime" min-width="120" />
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
		  	  
		  
  </div>
	      
</template>

<script setup>
import { getRechargeAll, memberLevel } from '@/api/ven/index'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance()	
const showSearch = ref(true)
const tableData = ref([])
const memberLevelList = ref([])
const total = ref(0)
const title = ref('')
const loading = ref(true)
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    venueId: useUserStore().user.venueId,
    name: undefined
  },
  rules: {
		
  }
})
const { queryParams, form, rules } = toRefs(data)
// 获取列表


onMounted(() => {
  getList()
  getMemberLevel()
})
function getList() {
  getRechargeAll(queryParams.value).then(res => {
    loading.value = false
    tableData.value = res.rows
    total.value = res.total
  })
}
function getMemberLevel() {
  memberLevel().then(res => {
    memberLevelList.value = res
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

</script>

<style>
</style>
